<template>
  <view class="banner-list">
    <view v-if="item.sclUid === 'scl_examination_depression'" class="checkup-mental-entry-box"
          :style="{top:noticeTopNumber,backgroundImage:'url('+item.detailInfo.bannerBoxBg+')', marginTop: '20rpx'}">
      <CheckupDepressedEntry sourceType="17" :banner-box-bg="item.detailInfo.bannerBoxBg" />
    </view>
    <SexualityCheckupEntry sourceType="17" v-else-if="item.sclUid === 'scl_sexual_orientation'"
                           :box-bg="item.detailInfo.bannerBoxBg" :sty="{marginTop: '0'}" />
    <MentalHealthCheckupEntryVue sourceType="17" v-else-if="item.sclUid === 'scl_examination'"
                                 :box-bg="item.detailInfo.bannerBoxBg"
                                 :sty="{marginLeft: '-10rpx', marginBottom: '-50rpx', marginTop: '20rpx'}" />
    <view v-else-if="item.scloReportDetail.pageType === 'mailun'" class="banner-img">
      <MailunEntry sourceType="17" :box-bg="item.detailInfo.bannerBoxBg" />
    </view>
    <image class="banner-img" v-else :src="item.detailInfo.bannerBoxBg" mode="widthFix"
           @click="() => $emit('checkNotCompleteScl')" />
  </view>
</template>

<script>
import MentalHealthCheckupEntryVue from "@/components/MentalHealthCheckupEntry.vue";
import CheckupDepressedEntry from "@/components/CheckupDepressedEntry.vue";
import SexualityCheckupEntry from "@/components/SexualityCheckupEntry.vue";
import MailunEntry from '@/components/MailunEntry.vue'

export default {
  name: "scl-banner-item",
  components: {MailunEntry, SexualityCheckupEntry, CheckupDepressedEntry, MentalHealthCheckupEntryVue},
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    noticeTopNumber: {
      type: Number
    }
  },
  data() {
    return {

    }
  }
}
</script>

<style scoped lang="scss">
.banner-list {
  width: 100%;
  position: relative;
  padding: 0 15rpx;
  box-sizing: border-box;

  .banner-img {
    width: 100%;
    position: relative;
  }
}

.checkup-mental-entry-box {
  width: 100%;
  // margin-top: 34rpx;
  margin-bottom: 8rpx;
  justify-content: center;
  display: flex;
  align-items: center;

  // position: sticky;
  z-index: 99;

  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.mailun-btn {
  position: absolute;
  top: 132rpx;
  left: 455rpx;
  width: 212rpx;
  height: 78rpx;
  animation: zoom 2s linear infinite;
}
</style>